<template>
  <div>
<div style="background-color: white;height: 200px;padding-top: 10px;padding-left: 10px">
    <h1>业务看板</h1>
    <div class="order">
      <div style="background-color: #8574ab;height: 40px">
        <router-link to="/home/orderset" class="top">客户订单</router-link>
      </div>
      <p>{{ordernum}}</p>
    </div>
    <div class="need">
      <router-link to="/home/orderset" class="top">需求单</router-link>
      <hr>
      <p>{{neednum}}</p>
    </div>
    <div class="receipt">
      <router-link to="/home/orderset" class="top">回单</router-link>
      <hr>
      <p>{{receiptnum}}</p>
    </div>
    <div class="exce">
      <router-link to="/home/orderset" class="top">异常单</router-link>
      <hr>
      <p>{{excenum}}</p>
    </div>
    <div class="cost">
      <router-link to="/home/orderset" class="top">结算单</router-link>
      <hr>
      <p>{{costnum}}</p>
    </div>
</div>
    <br>
      <div id="myChart" :style="{ width: '550px', height: '500px' ,backgroundColor: 'white',marginRight:'60px',
      paddingLeft:'20px',paddingTop:'20px'
      }"></div>
      <div id="myChart2" :style="{ width: '550px', height: '500px' ,backgroundColor: 'white',
      paddingLeft:'20px',paddingTop:'20px'}"></div>



  </div>

</template>

<script>
  import * as echarts from 'echarts';
  function init() {
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('myChart');
    var myChart = echarts.init(chartDom);
    var option = {
      title: {
        text: '需求单情况'
      },
      xAxis: {
        type: 'category',
        data: ['已提交', '未提交', '已驳回']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [2, 4, 6],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
    myChart.setOption(option);
  };
  function init2() {
    // 基于准备好的dom，初始化echarts实例
    var chartDom2 = document.getElementById('myChart2');
    var myChart2 = echarts.init(chartDom2);
    var option2 = {
      title: {
        text: '运输单情况'
      },
      xAxis: {
        type: 'category',
        data: ['已提交', '未提交', '已驳回']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [3, 4, 6],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
    myChart2.setOption(option2);
  }

  export default {
    name: "Business",
    data() {
      return {
        ordernum: 9,
        neednum: 8,
        receiptnum: 7,
        excenum: 6,
        costnum: 5,

      }
    },
    methods: {},
    mounted() {
      init();
      init2();
    }
  }
</script>

<style scoped>
  #myChart{
    float: left;
    margin-right: 40px;
  }
  #myChart2{
    float: left;
    margin-right: 40px;
  }
  .order {
    height: 120px;
    width: 200px;
    float: left;
    margin-right: 40px;
    margin-left: 50px;
    text-align: center;
    background-color: #9f8acc;
    color: white;
    font-size: 20px;
  }

  .receipt {
    border: 1px solid #000;
    height: 120px;
    width: 200px;
    float: left;
    margin-right: 40px;
    background-color: #0298d2;
    color: white;
    font-size: 20px;
    text-align: center;
  }

  .need {
    border: 1px solid #000;
    height: 120px;
    width: 200px;
    float: left;
    margin-right: 40px;
    background-color: #e24e4a;
    color: white;
    font-size: 20px;
    text-align: center;
  }

  .exce {
    border: 1px solid #000;
    height: 120px;
    width: 200px;
    float: left;
    margin-right: 40px;
    background-color: #66b1ff;
    color: white;
    font-size: 20px;
    text-align: center;
  }

  .cost {
    border: 1px solid #000;
    height: 120px;
    width: 200px;
    float: left;
    background-color: #4dba51;
    color: white;
    font-size: 20px;
    text-align: center;
  }

  .top {
    height: 8px;
    font-size: 15px;
    color: white;
  }
</style>
